<template>
  <Layout :class="prefixCls" v-bind="lockEvents">
    <LayoutFeatures />
    <ehsHeader fixed v-if="getShowFullHeaderRef" />
    <Layout :class="[layoutClass]">
      <LayoutSideBar v-if="getShowSidebar || getIsMobile" />
      <Layout :class="`${prefixCls}-main`">
        <EhsLayoutMultipleHeader />
        <LayoutContent />
        <LayoutFooter />
      </Layout>
    </Layout>
    <div class="ehs-aichat">
      <Tooltip placement="top" title="DeepSeek AI 知识库智能助手">
        <a-button shape="circle" size="large" @click="onAIChatButtonClick()">
          <CommentOutlined /> </a-button
      ></Tooltip>
    </div>
  </Layout>
  <ModifyPassword @register="registerModifyPassword" />
  <!-- 打开AI对话窗口 -->
  <ChatDrawer @register="registerAIChatDrawer" />
</template>

<script lang="ts">
  import { defineComponent, computed, unref, onMounted } from 'vue';
  import { Layout } from 'ant-design-vue';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';

  import ehsHeader from './header/ehsHeader.vue';
  import LayoutContent from './content/index.vue';
  import LayoutSideBar from './sider/index.vue';
  import EhsLayoutMultipleHeader from './header/ehsMultipleHeader.vue';
  import ModifyPassword from '/@/layouts/default/header/components/modify/ModifyPassword.vue';

  import { useModal } from '/@/components/Modal';

  import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useLockPage } from '/@/hooks/web/useLockPage';

  import { useAppInject } from '/@/hooks/web/useAppInject';

  import { useMessage } from '/@/hooks/web/useMessage';
  import { useUserStore } from '/@/store/modules/user';

  import { Tooltip } from 'ant-design-vue';
  import { CommentOutlined } from '@ant-design/icons-vue';
  import { useDrawer } from '/@/components/Drawer';
  import ChatDrawer from '/@/views/demo/ai/lke/ChatDrawer.vue';

  export default defineComponent({
    name: 'DefaultLayout',
    components: {
      LayoutFeatures: createAsyncComponent(() => import('/@/layouts/default/feature/index.vue')),
      LayoutFooter: createAsyncComponent(() => import('/@/layouts/default/footer/index.vue')),
      ehsHeader,
      LayoutContent,
      LayoutSideBar,
      EhsLayoutMultipleHeader,
      Layout,
      ModifyPassword,
      //异步引入时报错
      // ModifyPassword: createAsyncComponent(
      //   () => import('/@/layouts/default/header/components/modify/ModifyPassword.vue'),
      // ),
      Tooltip,
      CommentOutlined,
      ChatDrawer,
    },
    setup() {
      const { prefixCls } = useDesign('default-layout');
      const { getIsMobile } = useAppInject();
      const { getShowFullHeaderRef } = useHeaderSetting();
      const { getShowSidebar, getIsMixSidebar, getShowMenu } = useMenuSetting();

      // Create a lock screen monitor
      const lockEvents = useLockPage();

      const { createWarningModal } = useMessage();
      //从store中获取登录提示信息
      const userStore = useUserStore();
      //修改密码弹出框
      const [registerModifyPassword, { openModal: openModifyPasswordModal }] = useModal();

      //注册AI对话框
      const [registerAIChatDrawer, { openDrawer: openAIChatDrawer }] = useDrawer();

      const layoutClass = computed(() => {
        let cls: string[] = ['ant-layout'];
        if (unref(getIsMixSidebar) || unref(getShowMenu)) {
          cls.push('ant-layout-has-sider');
        }
        return cls;
      });

      /**
       * 设置Html元素root的字体大小
       */
      const setRootFontSize = () => {
        /* 获取布局视口的宽度，也就是浏览器宽度*/
        let width = document.documentElement.clientWidth;
        /* 经过换算，动态计算不同设备的font-size值 1080p计算为11.25 */
        let size = (width / 1920) * 20;
        /* 设置 html的font-size属性*/
        document.documentElement.style.fontSize = size + 'px';
        /* 必须设置在body上，设置在html中无效*/
        document.getElementsByTagName('body')[0].style.fontSize = size + 'px';
        // 调试获取设置值并输出
        let getBodyFontSize = document.getElementsByTagName('body')[0].style.fontSize;
        console.log(
          'body width=' + width + ' font_size=' + size + ' getBodyFontSize=' + getBodyFontSize,
        );
      };

      window.onresize = () => {
        //当页面尺寸改变的时候生效
        setRootFontSize();
      };

      /*
       * 打开AI知识库对话窗口
       */
      function onAIChatButtonClick() {
        openAIChatDrawer(true);
      }

      onMounted(() => {
        console.log('src\layouts\default\index.vue onMounted');
        //测试在获取到有登录提示信息时弹出密码修改
        let userLoginPrompt = userStore.getLoginPrompt;
        console.log('userLoginPrompt', userLoginPrompt);
        if (
          userLoginPrompt != undefined &&
          userLoginPrompt != null &&
          userLoginPrompt.length > 0x0
        ) {
          //如果有提示信息
          if (userLoginPrompt.match('请修改密码')) {
            openModifyPasswordModal(true);
          } else {
            //如果有其他提示信息，使用弹出框进行提示
            createWarningModal({
              // title: t('sys.login.loginSuccessTitle'),
              content: userLoginPrompt,
              getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
            });
          }
        }

        //当加载页面的时候设置生效
        setRootFontSize();
      });
      return {
        getShowFullHeaderRef,
        getShowSidebar,
        prefixCls,
        getIsMobile,
        getIsMixSidebar,
        layoutClass,
        lockEvents,
        registerModifyPassword,
        onAIChatButtonClick,
        registerAIChatDrawer,
      };
    },
  });
</script>
<style lang="less">
  @prefix-cls: ~'@{namespace}-default-layout';

  .@{prefix-cls} {
    display: flex;
    width: 100%;
    min-height: 100%;
    background-color: @content-bg;
    flex-direction: column;

    > .ant-layout {
      min-height: 100%;
    }

    &-main {
      width: 100%;
      margin-left: 1px;
    }
  }

  .ehs-aichat {
    position: absolute;
    right: 2rem;
    bottom: 5rem;
    z-index: 999;
  }
</style>
